<template>
  <div class="exportExcel-container common-container">
    <div class="export-config">
      <label class="export-label-config">
        <span class="label-name">压缩包文件名:</span>
        <el-input
          v-model="options.filename"
          placeholder="请输入文件名"
          clearable
          @change="(val) => handleChange(val, 'separator')"
          style="width: 200px; margin-left: 10px; margin-right: 30px;"
        ></el-input>
      </label>
      <label class="export-label-config">
        <span class="label-name">压缩包内层文件夹名称:</span>
        <el-input
          v-model="options.folderName"
          placeholder="请输入文件名"
          clearable
          @change="(val) => handleChange(val, 'separator')"
          style="width: 200px; margin-left: 10px; margin-right: 10px;"
        ></el-input>
      </label>
      <el-button class="export-config-button" type="primary" @click="exportZip">
        <i class="el-icon-download"></i>导出zip
      </el-button>
      <el-button class="export-config-button" type="primary" @click="exportFolderZip">
        <i class="el-icon-download"></i>导出多级文件夹zip
      </el-button>
    </div>
    <div class="export-data">
      <el-table
        :data="tableData"
        border
      >
        <template v-for="item in column">
          <el-table-column :prop="item.name" :label="item.label" :width="item.width"></el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { publicController} from '@/utils/publicPackage.js'
import { downloadFilesZip, downloadFilesWithFolder} from '@/utils/downloadZip'

export default {
  name: 'index',
  mixins:[ publicController ],
  data(){
    return{
      options:{
        filename: '人员信息',
        format: 'xlsx',
        folderName: '香菜记录日常',
      },
      tableData: [],
      column: [
        { name: 'id', label: 'id' },
        { name: 'name', label: '姓名' },
        { name: 'gender', label: '性别', },
        { name: 'age', label: '年龄'},
        { name: 'account', label: '账号' },
        { name: 'city', label: '城市' },
        { name: 'region', label: '城区' },
        { name: 'address', label: '地址',width:250 },
        { name: 'date', label: '日期' ,width:140},
        { name: 'postalCode', label: '邮编' },
      ],
    }
  },
  mounted () {
    this.getPartData(10)
  },
  methods:{
    handleChange(val,type){

    },
    exportZip(){
      const options = {
        zipName: this.options.filename || '香菜日记',
        files:[
          {
            filename: this.options.filename || '香菜日记',
            sheets: [
              {
                sheetName: this.options.filename || '香菜日记',
                columns: this.column,
                dataSource: this.tableData,
              }
            ]
          }
        ],
      }
      downloadFilesZip(options)
    },
    exportFolderZip(){
      const options = {
        zipName: this.options.filename || '香菜日记',
        folder:[
          {
            files:[
              {
                filename: this.options.filename || '香菜日记',
                sheets: [
                  {
                    sheetName: this.options.filename || '香菜日记',
                    columns: this.column,
                    dataSource: this.tableData,
                  }
                ]
              }
            ],
            folderName: this.options.folderName || '香菜日记文件夹',
          }
        ],
      }
      downloadFilesWithFolder(options)
    },
  }
}
</script>

<style lang="scss" scoped>
.export-config{
  height: 60px;
  width: 100%;
  border-bottom: 2px solid #f4f4f4;
  display: flex;
}
.export-label-config{
  .label-name{
    font-weight: 600;
    color: #4787d2;
  }
  .el-input{
    height: 30px;
    .el-input__inner{
      height: 30px;
      line-height: 30px;
    }
  }
}
.export-data{
  margin-top: 20px;
}
</style>
<style lang="scss">
.export-label-config{
  .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon{
    line-height: 30px;
  }
}
.export-config-button{
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  background-color: $primaryColor;
  border: 1px solid $primaryColor;
}
</style>
